<template>
  <div class="actiones">
    <el-button class="cheaback" ref="cheaback" type="text" icon="el-icon-back" @click="hback"
      >返回</el-button
    >
    <el-tabs>
      <h4>添加新版本</h4>
      <el-form :model="form" ref="formRes" :rules="rules">
        <el-form-item prop="versionId" label="版本号">
          <el-input v-model="form.versionId"  onkeyup="this.value=this.value.replace(/[^\d]/g,'')"
            onafterpaste="this.value=this.value.replace(/[^\d]/g,'')" placeholder="请输入版本号"/>
        </el-form-item>
        <el-form-item prop="versionName" label="版本名" >
          <el-input v-model="form.versionName" placeholder="请输入版本名，例如:1.0.1"/>
        </el-form-item>
        <el-form-item label="是否强制更新">
          <el-switch
            v-model="form.status"
            active-value="1"
            active-text="是"
            active-color="#ff7144"
            inactive-value="2"
            inactive-text="否"
          />
        </el-form-item>

        <el-form-item prop="content" label="更新内容">
          <el-input type="textarea" autosize v-model="form.content" placeholder="请输入更新的内容"/>
        </el-form-item>
        <el-form-item label="APK文件" prop="url">
           <el-upload
             action=""
             :http-request="Upload"
             
             :data="Aliyun"
             :multiple="false"
             :show-file-list="true"

             :file-list="imgUrl"
             :on-remove="handleRemove"
             :limit="10"
            >
            <el-button class="chedgp" size="small" type="primary" @click="Upload">点击上传</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item>
          <template v-slot="{ row }">
            <el-button class="clonect" @click="issueadd(row)"
              >确定发布</el-button
            >
          </template>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-tabs>
  </div>
</template>

<script>
import { userversionsadd } from "@/api/user";
import {ossmessage,ossupload} from '@/api/oss'
import { client } from '@/components/Hamburger/ossss'
export default {
  data() {
    return {
      imgUrl:[],
        progress:0,//进度条
        Aliyun:{},
      form: {
        versionName: "",
        content: "",
        versionId: "",
        status: "",
        url:''
      },
      rules: {
        versionId: [
          { required: true, message: "版本号不能为空", trigger: "blur" },
       
        ],
        versionName: [{ required: true, message: "版本名不能为空", trigger: "blur" }],
         url: [{ required: true, message: "上传文件不能为空", trigger: "blur" }],
      },
    };
  },
  created(){
  this.getAliyun()
 
  },
  methods: {
   async getAliyun() {
   const { data } = await ossmessage({
    'ossGroup':'AppVersion'
   })
   this.Aliyun = data

  },
      // 上传文件
  Upload(file) {
   const that = this
   // 判断扩展名
   const tmpcnt = file.file.name.lastIndexOf('.')
   const exname = file.file.name.substring(tmpcnt + 1)
   const names = ['apk']
   if (names.indexOf(exname) < 0) {
    this.$message.error('不支持的格式!')
    return
   }
  //  上传文件配置
   async function multipartUpload() {
    const listdata = await ossupload({
      'fileName':'.apk','ossGroup':'AppVersion'
    })
     let fileName = listdata.data.path
     console.log('741',fileName);
    //  console.log('999',file);
    client(that.Aliyun).put(fileName, file.file,
     {  
      progress: function(p) { // 获取进度条的值
       console.log('777',p)
       that.progress = p * 100
      }
     }).then(
     result => {
      // 下面是如果对返回结果再进行处理，根据项目需要
      // console.log(result)
      // that.imgUrl = 'http://' + result.bucket + '.' + that.Aliyun.endpoint + '/' + result.name
      that.imgUrl.push({
       name: file.file.name,
       url: result.url
      })
      that.form.url = that.imgUrl[0].url
      // console.log('777',that.form.url);
     })
   }
   multipartUpload()
  },
    // 发布
     issueadd(row) {
   
      this.$refs.formRes.validate(async (valid) => {
      try {
        if(!valid) return
        const res = await userversionsadd(this.form);
        this.$message.success(res.msg);
        if(res.code == "200"){
          this.$router.push('/home/information/edition')
        } else return
      //   if (res.code == 200) {
        //     this.$router.push("/home/information/edition");
      //   }
      } catch (e) {
        this.$message.error(e.msg);
      }
        })
    },
      // 返回
    hback() {
      this.$router.back();
    },
    // 删除文件
      handleRemove(file, fileList) {
   // console.log(file)
   for (var i in this.imgUrl) {
    if (this.imgUrl[i].name === file.name) {
     this.imgUrl.splice(i, 1)
    }
   }
  }
  },
};
</script>

<style scoped>
.actiones{
  background-color: #fff;
}
.el-tabs {
  text-align: center;
  margin: 0 auto;
}
.el-form-item {
  width: 25%;
  margin: 20px auto;
}
.el-input {
  display: inline-block;
  width: 80%;
}
::v-deep .is-active {
  color: #000 !important;
}
::v-deep .el-textarea__inner {
  width: 100% !important;
  float: right;
  /* transform: translateY(-80%); */
}
.el-textarea {
  width: 80%;
}
.el-switch {
  transform: translateX(-100%);
}
.el-button--small {
  background-color: #66c33b !important;
  transform: translateX(-130%);
}
.clonect {
   background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
  color: #fff;
}
::v-deep .el-form-item__error{
  margin-left: 20%;
}
.chedgp{
  border: 1px solid #66c33b !important;
}

</style>
